<template>
	<view class="">
		<view style="width: 80%;margin: 0 auto;">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
							@cancel="cancel" @clear="clear">
			</uni-search-bar>
		</view>
		
	</view>
</template>

<script>
import FuBlock from '../../components/fu-goods-block/index.vue';
import amapFile from '@/libs/amap-wx.js';
export default {
	components: {
		FuBlock
	},
	data() {
		return {
			city: '位置',
			latitude: 34.738038,
			longitude: 113.643589,
			banners: [],
			bannerIndex: 0,
			navList: [{
				type: 2,
				name: '爆款推荐'
			}, {
				type: 3,
				name: '离我最近'
			}, {
				type: 4,
				name: '最新发布'
			}, 
			// {
			// 	type: 5,
			// 	name: '价格最低'
			// },
			],
			status: 'more',
			page: 1,
			size: 10,
			isInit: false,
			lists: [],
			goods_type: 2,
			adList: [],
			myAmapFun: null,
			address: ''
		}
	},
	computed: {
		location: {
			get() {
				return this.$store.getters.location;
			},
			set() {}
		},
		userInfo() {
			return this.$store.getters.userInfo;
		}
	},
	onLoad(options) {
		this.myAmapFun = new amapFile.AMapWX({ key: '24bd3e9cce29ec3d7ff29ebb3563f17a' });
		let location = this.$store.state.location;
		if(options.invite_code){
			uni.setStorageSync('COMMONINVITECODESYNC', options.invite_code);
		}
		if(!location||!location.district){
		  this.autoGetLocation();
		}else{
			this.address = this.location.addressDesc
		}
		uni.$on('indexCity', res => { //修改城市重新获取商品
		  this.address = res.city
		  this.editStatus = true
		})
	},
	onShow() {
		this.getList();
		this.getSwiper();
		this.getAd();
	},
	onReachBottom() {
		this.getList();
	},
	onPullDownRefresh() {
		this.refresh()
	},
	onUnload() {
		uni.$off('indexCity')
	},
	onShareAppMessage() {
		return {
			path: `pages/tab/cate/cate-three/index?invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
		}
	},
	onShareTimeline() {
		return {
			path: `pages/tab/cate/cate-three/index?invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
		}
	},
	methods: {
		tabClick(e) {
			console.log(e)
			this.goods_type = e.type
			this.refresh()
		},
		// 去搜索
		navToSearch() {
			this.$urouter.navigateTo('/pages/index/search/search/index?name=' + this.searchText);
		},
		// 轮播图
		getSwiper() {
			this.$api
				.post(global.apiUrls.postAdvert, {
					typeid: 15
				})
				.then(res => {
					res = res.data;
					console.log('轮播图数据', res);
					if (res.code == 1) {
						this.banners = res.data;
					}
				})
				.catch(err => {
					console.error(err);
				});
		},
		getAd() {
			this.$api
				.post(global.apiUrls.postAdvert, {
					typeid: 19
				})
				.then(res => {
					res = res.data;
					console.log('轮播图数据', res);
					if (res.code == 1) {
						this.adList = res.data;
					}
				})
				.catch(err => {
					console.error(err);
				});
		},
		refresh() {
		  this.page = 1;
		  this.status = 'more';
		  this.getList();
		},
		getList() {
			if (this.status != 'more') return;
			this.status = 'loading';
			this.$api.post(global.apiUrls.post5db113922d297, {
				page: this.page,
				list_rows: this.size,
				is_goods_type: 2,
				lng: this.location.longitude,
				lat: this.location.latitude,
				goods_type: this.goods_type
			}).then(res => {
				if (res.data.code == 1) {
				  // let total = res.data.data.total;
				  let last_page = res.data.data.last_page;
				  let list = res.data.data.data;
				  if (this.page == 1) this.lists = [];
				  this.lists.push(...list);
				  this.$forceUpdate();
				  if (this.page < last_page) {
					  this.status = 'more';
					  this.page++;
				  } else {
				    this.status = 'noMore';
				  }
				  uni.stopPullDownRefresh();
				} else {
				  this.status = 'more';
				  uni.stopPullDownRefresh();
				}
				this.isInit = true
			}).catch(() => {
				this.status = 'more';
				uni.stopPullDownRefresh();
			})
		},
		autoGetLocation() {
			let _this = this;
			console.log('自动定位');
			uni.getLocation({
				// type: "wgs84",
				geocode: true,
				success: adr => {
					console.log(adr, 'adrrrrrrrrr')
					this.myAmapFun.getRegeo({
						location: adr.longitude + ',' + adr.latitude,
						success: data => {
							//成功回调
							console.log('自动定位 SDK回调', data);
							let regeoData = data[0].regeocodeData.addressComponent;
							this.city = Array.isArray(regeoData.city) && regeoData.city
								.length == 0 ? regeoData
								.province : regeoData.city;
							let latitude = data[0].latitude;
							let longitude = data[0].longitude;
							uni.setStorageSync('Current_City', this.city)
							this.address = data[0].desc
							_this.$store.commit('updataLocation', {
								province: regeoData.province,
								city: this.city,
								district: regeoData.district,
								addressDesc: data[0].desc,
								provinceCode: regeoData.adcode.substr(0, 2) + '0000',
								cityCode: regeoData.adcode.substr(0, 4) + '00',
								districtCode: regeoData.adcode + '',
								latitude: latitude,
								longitude: longitude
							});
							_this.location = {
								province: regeoData.province,
								city: this.city,
								district: regeoData.district,
								addressDesc: data[0].desc,
								provinceCode: regeoData.adcode.substr(0, 2) + '0000',
								cityCode: regeoData.adcode.substr(0, 4) + '00',
								districtCode: regeoData.adcode + '',
								latitude: latitude,
								longitude: longitude
							};
							console.log(_this.location, 444);
							this.getList();
						},
						fail: info => {
							//失败回调
							console.log(info);
						}
					});
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
	.page {
		background: url(https://localelife.chunchuangkeji.cn/h5img/images/bg-5.png) no-repeat;
		background-size: 100%;
		min-height: 444rpx;
	}
.head {
	width: 100%;
	background: url(https://localelife.chunchuangkeji.cn/h5img/images/bg-5.png) no-repeat;
	background-size: 100%;
	position: sticky;
	top: 0;
	z-index: 99;
	.cu-bar {
		justify-content: center !important;
	}
	.address {
		// margin-top: 12rpx;
		padding: 0 24rpx;
		.left {
			color: #fff;
			font-size: 28rpx;
			font-weight: 600;
			.addr {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
		.right {
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 32rpx;
			}
		}
	}
}
// 轮播图 start
.home-swiper {
  margin: 0 32rpx 0;
  border-radius: 8rpx;
  overflow: hidden;
}
.swiper-box {
	height: 320rpx;
	// border-radius: 8rpx;
	overflow: hidden;
	/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
	transform: translateY(0);
}
::v-deep .shopHone_swiperDotfd1_0 {
  position: absolute;
  bottom: 8rpx;
  left: 0rpx;
  right: 0rpx;
}
.shopHone_swiperDotSelectedfd1_0 {
  border: 3px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  background-size: 100% !important;
  width: 16rpx;
  height: 16rpx;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  margin: 0rpx 6rpx 0rpx 0rpx;
  font-size: 24rpx;
  color: #fff;
}
.shopHone_swiperDotUnselectedfd1_0 {
  border: 3px solid rgba(255, 255, 255, 1);
  background: transparent;
  background-size: 100% !important;
  width: 16rpx;
  height: 16rpx;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  margin: 0rpx 6rpx 0rpx 0rpx;
  font-size: 24rpx;
  color: #fff;
}
.ad-section {
	height: 130rpx;
	margin: 44rpx 32rpx 0;
	.ad-img {
		width: 100%;
		height: 130rpx;
	}
}
.list {
	padding: 0 32rpx;
	background-color: #fff;
}
.cu-btn {
	background: transparent;
	padding: 0;
}
</style>